<template>
  <div class="base-block">
    <!-- :is-read-only="true" 时，只展示-->
    <BaseCheckboxGroupCard
      v-model:select="select"
      width="calc(20% - 16px)"
      :options="flowOptions"
      @change="selectChange"
    >
      <template #default="{ row }">
        <div class="checkbox-card">
          <i class="checkbox-card__icon" :class="`checkbox-card__icon--${row.icon}`" />
          <div class="checkbox-card__info">
            <p class="checkbox-card__info__name">{{ row.name }}</p>
            <p class="checkbox-card__info__count">¥{{ row.count }}</p>
          </div>
          <div class="checkbox-card__ratio">
            <p class="checkbox-card__ratio__label">环比</p>
            <p class="checkbox-card__ratio__value" :class="row.ratioType==='down'?'checkbox-card__ratio__value--down':''">
              {{ row.ratio }}
            </p>
          </div>
        </div>
      </template>
    </BaseCheckboxGroupCard>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
import { BaseCheckboxGroupCard } from '@/components/base-form';
defineOptions({
  name: 'DemoBaseForm'
});
const select = ref([]);
const flowOptions: any[] = [{
  label: '访客数（UV）',
  value: '1',
  row: {
    icon: 'visitor',
    name: '访客数（UV）',
    count: '89,274.31',
    ratio: '+6.12%',
    ratioType: 'up'
  }
},
{
  label: 'IP数',
  value: '2',
  row: {
    icon: 'ip',
    name: 'IP数',
    count: 56,
    ratio: '-6.12%',
    ratioType: 'down'
  }
}, {
  label: '活跃用户',
  value: '4',
  row: {
    icon: 'active-user',
    name: '活跃用户',
    count: 56,
    ratio: '+6.12%'
  }
}, {
  label: '平均访问时长',
  value: '14',
  row: {
    icon: 'duration',
    name: '平均访问时长',
    count: 56,
    ratio: '+6.12%'
  }
}, {
  label: '平均访问页数',
  value: '24',
  row: {
    icon: 'visit-page',
    name: '平均访问页数',
    count: 56,
    ratio: '+6.12%'
  }
}];
const selectChange = (val: any) => {
  console.log(val);
};
</script>

<style lang="scss" scoped>
.checkbox-card {
  display: flex;
  justify-content: space-between;

  &__icon {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    padding: 12px;
    background: #fff url('@images/kgj/icon-sale.png') no-repeat center center;
    background-size: 30px auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgb(64 158 255 / 6%);
    &--sale {background-image: url('@images/kgj/icon-sale.png');}

    &--order {
      background-image: url('@images/kgj/icon-order.png');
    }

    &--customer {
      background-image: url('@images/kgj/icon-customer.png');
    }

    &--renewal {
      background-image: url('@images/kgj/icon-renewal.png');
    }

    // 无hover图标
    &--visitor {
      background-image: url('@images/kgj/icon-visitor.png');
    }

    &--active-user {
      background-image: url('@images/kgj/icon-active-user.png');
    }

    &--visit-page {
      background-image: url('@images/kgj/icon-visit-page.png');
    }

    &--duration {
      background-image: url('@images/kgj/icon-duration.png');
    }

    &--ip {
      background-image: url('@images/kgj/icon-ip.png');
    }
  }

  &__info {
    flex: 1;
    margin: 0 12px;

    &__name {
      height: 22px;
      font-size: 13px;
      font-weight: 400;
      line-height: 22px;
      color: #a8abb2;

    }

    &__count {
      height: 24px;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      color: #4975e9;
    }
  }

  &__ratio {
    width: 60px;
    text-align: right;

    &__label {
      height: 22px;
      font-size: 12px;
      font-weight: 400;
      line-height: 22px;
      color: #a8abb2;
      letter-spacing: -.01px;
    }

    &__value {
      height: 20px;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      color: #F56C6C;
      letter-spacing: -.01px;

      &::after {
        display: inline-block;
        margin: -10px 0 0 6px;
        font-size: 14px;
        vertical-align: middle;
        content: '';
        border-color: transparent transparent #F56C6C;
        border-style: solid;
        border-width: 6px 4px;
      }

      &--down {
        color: #67C23A;

        &::after {
          margin-top: 6px;
          border-color: #67C23A transparent transparent;
        }
      }
    }

  }
}

:deep(.base-checkbox-group).has-checkbox {
  .el-checkbox {
    &.is-checked,
    &:hover {
      .checkbox-card {
        &__icon {
          &--sale {
            background-image: url('@images/kgj/icon-sale-hover.png');
          }

          &--order {
            background-image: url('@images/kgj/icon-order-hover.png');
          }

          &--customer {
            background-image: url('@images/kgj/icon-customer-hover.png');
          }

          &--renewal {
            background-image: url('@images/kgj/icon-renewal-hover.png');
          }
        }
      }
    }
  }
}
</style>
